<template name="my">
	<view class="my" style="padding-bottom: 120rpx;">
		<view class="top">
			<view class="navbar" :style="{ height: navBarHeight + 'px' }"></view>
			<image src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png" mode="" class="bgImg"></image>
			<navigator v-if="hasLogin" url="/pages/my/editInfo" hover-class="none" >
			<view class="headImg">
				<image v-if="userInfo.head" :src="userInfo.head"></image>
				<image v-else src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/head.png"></image>
				<view class="name">{{userInfo.nichen}}</view>
			</view>
			</navigator>
			<navigator v-else url="/pages/login/login" hover-class="none" >
			<view class="headImg">
				<image src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/head.png"></image>
				<view class="noLogin">
					<view class="t">未登录/注册</view>
					<view class="b">点击头像可登录/注册</view>
				</view>
			</view>
			</navigator>
		</view>
		<view class="content-box">
			<view class="info-box" v-if="hasLogin">
				<view class="l" style="margin-left: -360upx;"> 星币余额</view>
				<view class="l" style="font-size: 40upx;font-weight: bolder;color:#000;">
					<text style="color:#9EC572;margin:0 20upx;font-weight: bold;margin-left: -250upx;line-height:0upx;"></text>
					
					 {{userInfo.moneys}} 
					</view>
				<view class="r" @click="toPocketLog"><uni-icons type="info" size="22" color="#000" style="margin-left:10upx"></uni-icons></view>
				<view class="r" @click="toPocketLog">资金日志</view>
			</view>
			
	<!-- 		<view  class="dev-box vipbox" >
				<button class="rech" v-if="showForm"  @click="toRecharge">开通会员</button> 
				<button class="rech" v-if="!showForm"   @click="toRecharge" style="font-size: 30upx;font-weight: bolder;color:#000;line-height:65upx">会员权益剩余:{{userInfo.vipDate}}天</button> 
			</view> -->
		
			
			<view class="dev-box" >
				<view class="title">常用功能</view>
				<yzb-grid :columnNum="4" :data="myGrid" show-border="false" imgStyle="uni-grid-item-image-small" @click="handleClickMyGrid"></yzb-grid>
			</view>
			
			<view class="dev-box" >
				<view class="title">信息管理</view>
				<yzb-grid :columnNum="4" :data="saveGrid" show-border="false" imgStyle="uni-grid-item-image-small" @click="saveClickMyGrid"></yzb-grid>
			</view>
			<view class="dev-box" >
				<view class="title">校园圈</view>
				<yzb-grid :columnNum="4" :data="saveGridxyq" show-border="false" imgStyle="uni-grid-item-image-small" @click="saveClickMyGridxyq"></yzb-grid>
			</view>
			<view class="dev-box" >
				<view class="title">商家功能</view>
				<yzb-grid :columnNum="4" :data="busGrid" show-border="false" imgStyle="uni-grid-item-image-small" @click="handleClickBusGrid"></yzb-grid>
			</view>
		</view>
		<view class="btn-box">
			<button v-if="!hasLogin" class="loginBtn" @click="toLogin">立即登录</button>
			<button v-if="hasLogin" class="logoutBtn" @click="loginOut">退出登录</button>
		</view>
		<chuizi-tabbar :current-page="4"></chuizi-tabbar>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import yzbGrid from '@/components/yzb/yzb-grid.vue';
	
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		
		},
		components: {
			yzbGrid
		},
		data() {
			return {
				showForm: false,
				statusBarHeight: 0,
				navBarHeight: 0,
				topHeight: 0,
				listCurrent:0,
				myGrid:[
					{
						text:"我的兼职",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/mypost.png",
						path:this.$mRoutesConfig.myPosition,
						type:1
					},
					// {
					// 	text:"校园圈",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/school.png",
					// 	path:this.$mRoutesConfig.schoolSquare,
					// 	type:14
					// },
					{
						text:"兼职收藏",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/collect.png",
						path:this.$mRoutesConfig.myCollect,
						type:1
					},
					{
						text:"我的团队",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/myteam.png",
						path:this.$mRoutesConfig.myTeam,
						type:2
						
					},
					// {
					// 	text:"站内信息",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/msg.png",
					// 	path:this.$mRoutesConfig.notices,
					// 	type:3
					// },
					// {
					// 	text:"商家入驻",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/checkin.png",
					// 	path:this.$mRoutesConfig.checkIn,
					// 	type:4
					// },
					{
						text:"我要提现",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/withdraw.png",
						path:this.$mRoutesConfig.withdrawal,
						type:5
						
					},
					{
						text:"代理介绍",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/dl.png",
						path:this.$mRoutesConfig.proxyIntro,
						type:6
					},
					{
						text:"功能期望",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/fc.png",
						path:this.$mRoutesConfig.desire,
						type:7
					},
					{
						text:"在线客服",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/cs.png",
						path:this.$mRoutesConfig.kf,
						type:8
					},
					// {
					// 	text:"闲置广场",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/xianzhi1.png",
					// 	path:this.$mRoutesConfig.idleSquare,
					// 	type:9
					
					// {
					// 	text:"发布闲置",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/fabu2.png",
					// 	path:this.$mRoutesConfig.publishIdle,
					// 	type:10
					// },
					// {
					// 	text:"帮帮管理",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/bbbfb.png",
					// 	path:this.$mRoutesConfig.bbbPushList,
					// 	type:11
					// },
					// {
					// 	text:"订单管理",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/order2.png",
					// 	path:this.$mRoutesConfig.orderList,
					// 	type:11
					// },
					// {
					// 	text:"帮帮吧发布",
					// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/add.png",
					// 	path:this.$mRoutesConfig.bbbPublish,
					// 	type:12
					// },
					{
						text:"设置",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/setting.png",
						path:this.$mRoutesConfig.setUp,
						type:13
					}
				],
				busGrid:[
					{
						text:"发布管理",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/sub.png",
						path:this.$mRoutesConfig.publishManage,
						type:1
					},{
						text:"入驻查看",
						image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/bus.png",
						path:this.$mRoutesConfig.viewBuiness,
						type:11
					}
					],
					saveGrid:[
						{
							text:"我的帮帮",
							image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/bbbfb.png",
							path:this.$mRoutesConfig.bbbPushList,
							type:11
						},
						// {
						// 	text:"我的校园圈",
						// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/bbbfb.png",
						// 	path:this.$mRoutesConfig.mySchoolSquare,
						// 	type:13
						// },{
						// 	text:"校园圈点赞",
						// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/ydz.png",
						// 	path:this.$mRoutesConfig.likeSchoolSquare,
						// 	type:13
						// },{
						// 	text:"校园圈收藏",
						// 	image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/collect.png",
						// 	path:this.$mRoutesConfig.collSchoolSquare,
						// 	type:13
						// },
						{
							text:"我的接单",
							image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/order2.png",
							path:this.$mRoutesConfig.orderList,
							type:12
						},
						{
							text:"闲置",
							image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/xianzhi1.png",
							path:this.$mRoutesConfig.myIdle,
							type:9
						},
						],
						saveGridxyq:[
						{
								text:"校园圈",
								image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/icon/bbbfb.png",
								path:this.$mRoutesConfig.mySchoolSquare,
								type:13
							},{
								text:"点赞",
								image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/2024/images/ydz.png",
								path:this.$mRoutesConfig.likeSchoolSquare,
								type:13
							},{
								text:"收藏",
								image:"https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/collect.png",
								path:this.$mRoutesConfig.collSchoolSquare,
								type:13
							},
							],
				customStyle: {
					marginTop:'30rpx',
					width:'100%',
					fontSize:'30rpx',
					fontWeight:'500',
					height:'80rpx',
					background:'#FFAFAF',
					borderRadius:'40rpx',
					marginBottom:'300rpx'
				},
				config: {
					title: "", //title
					type: 0, //type 1，3胶囊 2，4无胶囊模式
					cssStyle:true ,//首页底部颜色配置
					newsIcon:true//消息icon
				}
			}
		},
		onLoad(options) {
			  this.showForm = true;
			  if (this.hasLogin) {
				this.getUserInfo();			  		
			  }
		},
		onPullDownRefresh() {
		  if (this.hasLogin) {
		  				this.getUserInfo();			  		
		  }
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			//#ifdef MP-WEIXIN
			this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
			this.topHeight = this.navBarHeight + uni.upx2px(80);
			//#endif
		},
		onShow() {
			
		 },
		methods: {
			change(e){
				this.listCurrent = e.detail.current;
			},
			toLogin() {
				if (this.hasLogin) {
				} else {
					
					this.$mRouter.push({
						//#ifdef MP-WEIXIN
						route: this.$mRoutesConfig.login,
						//#endif
						//#ifdef H5
						route: this.$mRoutesConfig.loginPwd,
						//#endif
						query: {
							id: 1
						}
					});
				}
			},
			toPocketLog() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.pocketLog
				});
			},
			async getUserInfo(){
				let res =await this.$apis.getUserInfo();
				console.log(res);
				if(res.vipDate>0){
					this.showForm=false;
				}else{
						this.showForm=true;
				}
				this.$store.commit('SET_USERINFO', res);
				this.userInfo={};
			},
			loginOut(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: function (res) {
						if (res.confirm) {
							let pcode=uni.getStorageSync("pcode")
							uni.clearStorageSync();
							uni.setStorageSync("pcode",pcode);
							_this.$store.commit('SET_LOGOUT');
							this.hasLogin=false;
						}
					}
				});
			},
			toRecharge(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.recharge
				});
			},
			
			saveClickMyGrid(o){
				
				this.$mRouter.push({
					route: this.saveGrid[o.index].path,
					query: {
						type: this.saveGrid[o.index].type,
						text: this.saveGrid[o.index].text
					}
				});
			},
			saveClickMyGridxyq(o){
				
				this.$mRouter.push({
					route: this.saveGridxyq[o.index].path,
					query: {
						type: this.saveGridxyq[o.index].type,
						text: this.saveGridxyq[o.index].text
					}
				});
			},
			handleClickMyGrid(o){
				
				this.$mRouter.push({
					route: this.myGrid[o.index].path,
					query: {
						type: this.myGrid[o.index].type,
						text: this.myGrid[o.index].text
					}
				});
			},
			handleClickBusGrid(o){
				this.$mRouter.push({
					route: this.busGrid[o.index].path,
					query: {
						type: this.busGrid[o.index].type,
						text: this.busGrid[o.index].text
					}
				});
			}
		}
		
	}
</script>

<style  lang="scss">
	.top {
		top: 0;
		width: 100%;
		.bgImg{
			 z-index:-1; 
			 width:100%; 
			 position: fixed; 
			 top:0; 
		}
		.navbar {
			height: 100upx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			text {
				color: #000;
				font-weight: bolder;
			}
		}
		.headImg{
			padding-left:20upx;
			widht:100%;
			height:140upx;
			
			image{
				width:170upx;
				height:170upx;
				border-radius: 50%;
				overflow: hidden;
				float:left;
			}
			.name{
				float:left;
				line-height:170rpx;
				font-size: 40rpx;
				font-weight: bold;
				margin-left: 22rpx;
			}
			.noLogin{
				float:left;
				height:170rpx;
				margin-left:22rpx;
				.t{
					margin-top:30rpx;
					line-height: 60rpx;
					font-size: 40rpx;
					color:black;
					font-weight: bold;
				}
				.b{
					margin-bottom:30rpx;
					line-height: 50rpx;
					font-size: 26rpx;
					color:#333333;
				}
			}
		}
	}
	.swiper{
		height:380rpx;
	}
.my{
	.content-box{
		.vipbox{
			background-image: url("https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/myIcon/vipbox.png");
			background-size: contain;
			background-repeat: no-repeat;
			height:80upx;
			.rech{
				background-image: linear-gradient(#FFBF3E, #D6DC00);
				border-radius: 28upx;
				color:white;
				height:55upx;
				font-size:28upx;
				line-height:55upx;
				margin:0;
				float:right;
			}
		}
		.info-box{
			height:80upx;
			margin: 25upx 10% 20upx 10%;
			font-size: $font-base;
			color:$font-color-base;
			.l{
				float:left;
				line-height:80upx;
			}
			.r{
				float:right;
				line-height:80upx;
			}
		}
	}
	.btn-box{
		margin: 20upx 4% 20upx 4%;
		height:100upx;
		.loginBtn{
			width:100%;
			height:80upx;
			line-height: 80upx;
			color:white;
			border-radius: 35upx;
			background-color: #5FDB7E;
		}
		.logoutBtn{
			width:100%;
			height:80upx;
			line-height: 80upx;
			color:white;
			border-radius: 35upx;
			background-color: #aaa;
		}
	}
	.dev-box{
		margin-top: 16rpx;
		padding: 32rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.item{
			width: 33%;
			margin-bottom: 32rpx;
			display: inline-block;
			text-align: center;
			line-height: 50rpx;
			&:active{
				opacity: 0.68;
			}
			image{
				width: 82rpx;
				height:82rpx;
			}
		}
	}
}
</style>